<template>
  <ul class="nav-list" :class="{'nav-list--sticky': !isTopbarBlock}">
    <li class="nav-item" :class="{'nav-item--active': item.path == $route.path}" v-for="item in navList" :key="item.id" @click="changeCategory">
      <nuxt-link :to="item.path">{{ item.name }}</nuxt-link>
    </li>
  </ul>
</template>

<script>
  import { mapState } from "vuex"

  export default {
    computed: {
      ...mapState('category', {
        navList: 'pinCategoryList'
      }),
      ...mapState([
        'isTopbarBlock'
      ])
    },
    methods: {
      changeCategory() {
        window.scrollTo({ top: 0 })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .nav-list{
    position: fixed;
    top: 80px;
    padding: 16px 12px;
    background: #fff;
    border-radius: 3px;
    transition: all .2s;

    &.nav-list--sticky{
      top: 20px;
    }

    .nav-item{
      position: relative;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      color: #2e3135;
      border-radius: 3px;
      transition: background-color .2s, color .2s;

      &:nth-of-type(3)::after{
        content: '';
        position: absolute;
        bottom: -5px;
        left: 0;
        width: 100%;
        height: 1px;
        background: #ddd;
        transform-origin: 0 100%;
        transform: scaleY(.5);
      }

      &:not(:first-child){
        margin-top: 10px;
      }

      >a{
        width: 100%;
        line-height: 30px;
        padding: 0 12px;
        text-align: center;
        color: #909090;
      }

      &:hover{
        background-color: hsla(0,0%,94.9%,.6);

        >a{
          color: $theme;
        }
      }
    }

    .nav-item--active,.nav-item--active:hover{
      background-color: $theme;
      color: #fff;

      >a{
        color: #fff;
      }
    }
  }
</style>
